<?php
/**
 * @link https://www.kancloud.cn/cleverstone/ymb2
 * @copyright Copyright (c) 2020 Yii Manager Software LLC
 */

use builder\uploads\assets\IndexAsset;

/** @var \yii\web\View $this */

IndexAsset::register($this);
?>
<div ng-controller="ym2.ctrl.file.manager" class="d-flex flex-row" style="width:900px">
    <!--左侧菜单-->
    <div class="upload-menu w-200 h-580 flex-shrink-0 border-right-light">
        <div class="pl-2 py-2" id="UploaderSide"></div>
    </div>
    <!--附件管理-->
    <div class="card border-0 flex-grow-1">
        <div class="card-header bg-white border-bottom-0 pb-0 clearfix">
            <div class="layui-btn-container float-left">
                <button ng-click="actionForm($event)" type="button" class="layui-btn layui-btn-sm layui-btn-primary">上传文件</button>
                <button ng-click="actionFileDel($event)" type="button" class="layui-btn layui-btn-sm layui-btn-warm {{ selectedSort.length ? '' : 'layui-btn-disabled' }}">删除选中文件</button>
                <button ng-click="actionFileTransfer($event)" type="button" class="layui-btn layui-btn-sm layui-btn-primary {{ selectedSort.length ? '' : 'layui-btn-disabled' }}">移动选中文件</button>
            </div>
            <form class="float-right layui-input-group">
                <div class="input-control">
                    <input ng-model="filterKeyword" type="text" class="layui-input layui-input-xs rounded-0 w-250" placeholder="输入点什么吧?">
                    <span class="bi bi-x-circle text-danger remove-btn" ng-show="filterKeyword" ng-click="actionClearSearch()"></span>
                </div>
                <div class="layui-input-suffix pl-0">
                    <button class="layui-btn layui-btn-gxs layui-btn-theme rounded-0" ng-click="actionSearch()">
                        <span class="bi bi-search f14"></span>
                    </button>
                </div>
            </form>
        </div>
        <div class="card-body file-body" ym2-image-group>
            <div ng-show="listData && listData.length" class="file-group" ng-repeat="(index, item) in listData">
                <div class="file-item" title="{{ item.name }}" ng-click="$parent.actionToggle(item.id)" ng-class="$parent.selectedSort.indexOf(item.id) > -1 ? 'active' : ''">
                    <span class="badge badge-dark border active-badge" ng-show="selectedSort.indexOf(item.id) > -1" ng-bind="selectedSort.indexOf(item.id) + 1"></span>
                    <img class="file" ng-if="item.type == 'IMAGE'" ng-src="{{ item.url }}" alt>
                    <video class="file" ng-if="item.type == 'VIDEO'">
                        <source src="{{item.url}}" type="{{item.mime}}">
                    </video>
                    <div class="file file-outer" ng-if="item.type == 'AUDIO' || item.type == 'OTHER'">
                        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <path d="M160 0h512l256 256v704c0 35.3472-28.6528 64-64 64H160c-35.3472 0-64-28.6528-64-64V64c0-35.3472 28.6528-64 64-64z" fill="{{appThemeColor}}"></path>
                            <path d="M672 0l256 256h-192c-35.3472 0-64-28.6528-64-64V0z" fill="#CAD1F8"></path>
                            <text y="600" x="300" font-size="180px" fill="#fff">{{ '.' + item.ext }}</text>
                        </svg>
                    </div>
                </div>
                <div class="file-detail">
                    <span ng-if="item.type == 'IMAGE'" ym2-full-image srcx="{{item.url}}" alt="{{item.name}}" class="bi bi-eye-fill cursor-zoom-in f20" title="查看详情"></span>
                    <span ng-if="item.type != 'IMAGE'" title="查看详情" class="bi bi-eye-fill cursor-pointer f20 text-white" ng-click="actionOpenDetail(item.url)"></span>
                    <span title="编辑标题" class="bi bi-pencil-square cursor-pointer f16 ml-3" ng-click="actionEdit(item.id)"></span>
                </div>
                <div class="info">
                    <div class="item">
                        <span ng-bind="item.name"></span>
                    </div>
                    <div class="item d-flex align-items-center justify-content-between">
                        <span ng-bind="item.size_short"></span>
                        <span class="text-primary" ng-bind="item.ext"></span>
                    </div>
                    <div class="item">
                        <span ng-bind="item.created_at"></span>
                    </div>
                </div>
            </div>
            <div ng-hide="!listData || listData.length" class="ym2-nodata"></div>
        </div>
        <div class="card-footer bg-white border-top-0 clearfix">
            <div class="float-left" ng-show="listData && listData.length">
                <div ym2-page="pageModel"></div>
            </div>
            <div class="float-right">
                <button ng-click="actionUseSelectedFiles()" type="button" class="layui-btn layui-btn-sm layui-btn-theme {{ selectedSort.length ? '' : 'layui-btn-disabled' }}">使用选中文件</button>
            </div>
        </div>
    </div>
</div>
